<template>
  <view class="list-box">
    <view class="head-box">
      <!-- 标题栏 -->
      <view class="back">
        <uni-icons type="left" size="30" @click="toback"></uni-icons>
      </view>
      <input
        v-model="searchVal"
        class="search-input"
        placeholder="请输入关键字"
        @keyup.enter="onSearch"
        @input="onSearch"
      />
    </view>

    <view class="u-waterfall u-p-16" v-if="!isEmpty">
      <view id="u-left-column" class="u-column">
        <view
          class="goods-item"
          v-for="leftGoods in leftList"
          :key="leftGoods.id"
        >
          <i-card top="20rpx" padding="0" @click="toDetail(leftGoods.id)">
            <view class="goods_item-box">
              <image
                :src="leftGoods.productMainPic"
                mode="aspectFill"
                class="goods-image"
              ></image>
              <view class="goods-tag-box">
                <view class="goods-title">{{ leftGoods.productName }}</view>
                <view class="goods-price">￥{{ leftGoods.discountPrice }}</view>
                <view class="goods-origin-price"
                  >￥{{ leftGoods.oriPrice }}</view
                >
              </view>
            </view>
          </i-card>
          <!-- <shopro-goods-card
                        :detail="leftGoods"
                        :type="leftGoods.activity_type"
                        :image="leftGoods.productMainPic"
                        :title="leftGoods.productName"
                        :subtitle="leftGoods.subtitle"
                        :price="leftGoods.discountPrice"
                        :originPrice="leftGoods.oriPrice"
                        :sales="leftGoods.sales"
                        :tagTextList="leftGoods.activity_discounts_tags"
                        @click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })"
                    ></shopro-goods-card> -->
        </view>
      </view>
      <view id="u-right-column" class="u-column">
        <view
          class="goods-item u-m-b-16 u-flex u-row-center u-col-center"
          v-for="rightGoods in rightList"
          :key="rightGoods.id"
        >
        <i-card top="20rpx" padding="0" @click="toDetail(rightGoods.id)">
            <view class="goods_item-box">
              <image
                :src="rightGoods.productMainPic"
                mode="aspectFill"
                class="goods-image"
              ></image>
              <view class="goods-tag-box">
                <view class="goods-title">{{ rightGoods.productName }}</view>
                <view class="goods-price">￥{{ rightGoods.discountPrice }}</view>
                <view class="goods-origin-price"
                  >￥{{ rightGoods.oriPrice }}</view
                >
              </view>
            </view>
          </i-card>
        </view>
      </view>
    </view>

    <!-- 缺省页 -->
    <i-notData v-if="isEmpty"></i-notData>
    <!-- 加载更多 -->
    <i-more v-if="!isEmpty" :status="loadStatus" />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getProductCategoryList } from "../../api/index";
import _ from "lodash";

const isEmpty = ref(false);
const searchVal = ref("");
const loadStatus = ref("loadmore"); // loadmore, loading, nomore
const formData = reactive({
  ypageNum: 1,
  ypageSize: 100,
  total: 0,
});
const leftList = ref<any[]>([]);
const rightList = ref<any[]>([]);
const tempList = ref<any[]>([]);
const leftHeight = ref(0);
const rightHeight = ref(0);

const historyTag = uni.getStorageSync("searchHistoryArr")
  ? JSON.parse(uni.getStorageSync("searchHistoryArr"))
  : [];

const getGoodsList = async () => {
  loadStatus.value = "loading";
  const res = await getProductCategoryList({
    productName: searchVal.value,
    ypageNum: formData.ypageNum,
    ypageSize: formData.ypageSize,
  });

  if (searchVal.value && !historyTag.includes(searchVal.value)) {
    const searchHistoryArr = JSON.stringify(
      getArr(historyTag, searchVal.value)
    );
    uni.setStorageSync("searchHistoryArr", searchHistoryArr);
  }
  if (res.code === 200) {
    tempList.value = res.rows;
    formData.total = res.total;
    isEmpty.value = !tempList.value.length;
    loadStatus.value =
      tempList.value.length < formData.total ? "loadmore" : "nomore";
    splitData();
  }
};

const toDetail = (id: string) => {
  uni.navigateTo({
    url: `/pages/views/goodsDetail?id=${id}`,
  });
};

const splitData = () => {
  if (!tempList.value.length) return;
  const item = tempList.value.shift();
  if (leftHeight.value <= rightHeight.value) {
    leftHeight.value += 330;
    leftList.value.push(item);
  } else {
    rightHeight.value += 330;
    rightList.value.push(item);
  }
  if (tempList.value.length) {
    setTimeout(splitData, 100);
  }
};

const onSearc = () => {
  leftList.value = [];
  rightList.value = [];
  leftHeight.value = 0;
  rightHeight.value = 0;
  formData.ypageNum = 1;
  getGoodsList();
};

const onSearch = _.debounce(onSearc, 300);

const clearSearch = () => {
  searchVal.value = "";
  leftList.value = [];
  rightList.value = [];
  leftHeight.value = 0;
  rightHeight.value = 0;
};

const getArr = (list: any[], item: any) => {
  const arr = [...list];
  const length = 10;
  arr.length < length ? arr.unshift(item) : arr.pop();
  return arr;
};

const toback = () => {
  uni.navigateBack({
    delta: 1,
  });
};

onMounted(() => {
  getGoodsList();
});

onLoad((options) => {
  searchVal.value = options.keywords || "";
});
</script>

<style lang="scss" scoped>
.u-waterfall {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.u-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: auto;
}

.head-box {
  position: sticky;
  top: 0;
  z-index: 998;
  height: 88rpx;
  background: #fff;
  padding: 0 32rpx;
  padding-top: safe-area-inset-top;
  @include flexRS;
  box-sizing: border-box;
}

.search-input {
  width: 100%;
  height: 60rpx;
  padding: 0 20rpx;
  border: 1px solid #ccc;
  border-radius: 30rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.goods_item-box {
  border-radius: 24rpx;
  image {
    width: 100%;
  }
  .goods-tag-box {
    padding: 0 24rpx 24rpx;
  }
  .goods-title {
    font-weight: bold;
    font-size: 28rpx;
    margin-bottom: 6rpx;
  }
  .goods-price {
    font-size: 28rpx;
    color: #ff0000;
    margin-bottom: 6rpx;
  }
  .goods-origin-price {
    font-size: 24rpx;
    color: #999999;
    text-decoration: line-through;
  }
}
.goods-item {
  width: 50vw;
}
</style>
